<template>
  <div class="bg-white container-ymm">
    <div class="header-ymm" style="border:none">
      <el-row style="text-align:right" class="pt-10 pb-10">
        <el-button type="primary">保存</el-button>
      </el-row>
      <el-row :gutter="20" style="margin-bottom: 15px;border: 1px dashed #eee"/>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-row :gutter="1">
            <el-col :span="4">
              <div class="shipment_label" name="门店">门店:</div>
            </el-col>
            <el-col :span="20">
              <el-select v-model="value" placeholder="">
                <el-option/>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row :gutter="1">
            <el-col :span="4">
              <div class="shipment_label" name="提货方式">提货方式：</div>
            </el-col>
            <el-col :span="20">
              <el-select v-model="value" placeholder="">
                <el-option/>
              </el-select>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="8">
          <el-row :gutter="1">
            <el-col :span="4">
              <div class="shipment_label" name="收款金额">收款金额:</div>
            </el-col>
            <el-col :span="15">
              <el-input v-model="value" placeholder=""/>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-row :gutter="1">
            <el-col :span="4">
              <div class="shipment_label" name="支付方式">支付方式:</div>
            </el-col>
            <el-col :span="20">
              <el-select v-model="value" placeholder="">
                <el-option/>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row :gutter="1">
            <el-col :span="4">
              <div class="shipment_label" name="收款日期">收款日期：</div>
            </el-col>
            <el-col :span="15">
              <el-input v-model="value" placeholder=""/>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="8">
          <el-row :gutter="1">
            <el-col :span="4">
              <div class="shipment_label" name="用户地址">用户地址:</div>
            </el-col>
            <el-col :span="15">
              <el-input v-model="value" placeholder=""/>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-row :gutter="1">
            <el-col :span="4">
              <div class="shipment_label" name="用户名称">用户名称:</div>
            </el-col>
            <el-col :span="20">
              <el-select v-model="value" placeholder="">
                <el-option/>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row :gutter="1">
            <el-col :span="4">
              <div class="shipment_label" name="用户电话">用户电话：</div>
            </el-col>
            <el-col :span="15">
              <el-input v-model="value" placeholder=""/>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="pt-10 pb-10">
        <el-col :span="16">
          <el-row :gutter="1">
            <el-col :span="2">
              <div class="shipment_label" name="备注">备注：</div>
            </el-col>
            <el-col :span="19">
              <el-input v-model="value" placeholder=""/>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <div class="table-ymm">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click.native.prevent="addRow(tableData)">添加</el-button>
            <el-button type="text" size="small" @click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column label="SKU编码">
          <template slot-scope="scope">
            <span >{{ scope.row.name2 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="条码">
          <template slot-scope="scope">
            <span >{{ scope.row.name2 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="SKU名称">
          <template slot-scope="scope">
            <span >{{ scope.row.name3 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="数量">
          <template slot-scope="scope">
            <span >{{ scope.row.name4 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="销售单价">
          <template slot-scope="scope">
            <span >{{ scope.row.name5 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="实销单价">
          <template slot-scope="scope">
            <span >{{ scope.row.name6 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="实销小计">
          <template slot-scope="scope">
            <span >{{ scope.row.name6 }}</span>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="table-ymm-bt">
      <el-pagination :current-page="table.current_page" :page-sizes="[10, 20, 30, 40]" :page-size="10" :pager-count="table.page_count" :total="table.total" background layout="sizes, prev, pager, next,total" @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      modal: null, modalData: {},
      value: '',
      tableData: [
        {
          name1: 'FH45454523215', name2: '供应商代发', name3: '供应商代发', name4: '供应商代发', name5: '供应商代发', name6: '供应商代发', name7: '1', name8: '供应商代发', name9: '供应商代发',
          name10: '供应商代发', name11: '供应商代发', name12: '供应商代发', name13: '供应商代发', name14: '供应商代发', name15: '供应商代发', name16: '供应商代发'
        },
        {
          name1: 'FH45454523215', name2: '供应商代发', name3: '供应商代发', name4: '供应商代发', name5: '供应商代发', name6: '供应商代发', name7: '2', name8: '供应商代发', name9: '供应商代发',
          name10: '供应商代发', name11: '供应商代发', name12: '供应商代发', name13: '供应商代发', name14: '供应商代发', name15: '供应商代发', name16: '供应商代发'
        },
        {
          name1: 'FH45454523215', name2: '供应商代发', name3: '供应商代发', name4: '供应商代发', name5: '供应商代发', name6: '供应商代发', name7: '3', name8: '供应商代发', name9: '供应商代发',
          name10: '供应商代发', name11: '供应商代发', name12: '供应商代发', name13: '供应商代发', name14: '供应商代发', name15: '供应商代发', name16: '供应商代发'
        }
      ],
      table: {
        current_page: 1, page_count: 7, total: 100
      }
    }
  },
  created() {
    // this.getList()
    // this.getDistributorList()
    // this.getPartnerInfo()
  },
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    addRow(index, rows) {

    },
    // 分页
    handleCurrentChange() {

    },
    // 表格选择
    handleSelectionChange() {

    }

  }
}
</script>

<style >

.el-tabs__content .list{

}
.el-tabs__content .list >.item{
  margin: 10px 0 0;
  border: 1px solid #E9EDF0;
  border-radius: 4px;
  padding: 10px;
  color: #8F97A4;
  font-size: 12px;

}
.el-tabs__content .list >.item >.name{
 color: #1B263A;
 margin-bottom: 10px;

}
.el-tabs__content .list >.item .price{
  font-size: 14px;
}
.el-select--medium{width:75%!important;}
</style>
